<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0"/>
    <title>React 学习！！</title>
</head>
<body>
<div id="app"></div>
<script src="../bower_components/react/react.min.js"></script>
<script src="../bower_components/react/react-dom.min.js"></script>
<script src="../bower_components/react/browser.min.js"></script>
<script type="text/babel">
   
    var ReactComponent = React.createClass({
      //设置默认的一些属性
      getDefaultProps:function(){
        console.log("step 1 default props"); 
        return {
          myProps:''
        }
      },
      //设置默认的一些状态
      getInitialState:function(){
        console.log('step 2 setting default states');
        return{
          result:''
        }
      },
      //组件加载前加载一些数据
      comonentWillMount:function(){
        console.log("step 3 执行时间短，一般做ajax请求、打印一些日志");
      },
      handlerChange:function(event){        
        var _v = event.target.value;
        this.setState({result:_v})
      },
      render:function(){    
       console.log("step 4 component mount,正在加载执行渲染");
        return (  <div>
                    <h1>React Component</h1>
                    <input id="input" type="text" onChange={this.handlerChange}/>
                    <Child name={this.state.result}/>
                  </div>
               )
      },
      //可以操作真实节点，可以与一些第三方内容进行配置，比如swiper、iscroll等。
      componentDidMount:function(){
        console.log("step 5 did mount,已经加载完毕");
        console.log("操作真实的Dom节点");
        //修改render的input框内容，加入id属性
        //然后进行样式修改与控制，将会设置文本框字体为红色
        document.getElementById("input").style.color = "red";
      }
    });

    var Child = React.createClass({
      componentWillReceiveProps:function(nextProps,nextState){
          console.log("component will receive props");
      },
      //should是一个问句，询问开发者是否需要组件进行二次渲染
      shouldComponentUpdate:function(nextProps,nextState){
        // true子组件进行二次渲染，false不执行二次渲染
        // 思考这边是否能加入判断，以便确认是否进行二次渲染？
        console.log(nextProps);
        if(nextProps.name == 'vane'){
          return true;
        }else{
          return false;
        }
        return false; 
      },
      //组件即将去更新
      componentWillUpdate:function(){
        //用的不多，主要打印些日志
        console.log("will update child");
      },
      render:function(){
        return(
          <div>
            <h1>This is Child Component</h1>
            <p>Parent&#39;s value is {this.props.name}</p>
          </div>
        )
      },
      componentDidUpdate:function(){
        console.log("二次更新完的时候")
      }
    })

    ReactDOM.render( <ReactComponent/>, 
      document.getElementById('app'),
      function(){
        console.log('渲染完成啦！！');
      }
    )
    
</script>
</body>
</html>